Skip to content

Remove Next.js and migrate UI to plain React hosted from Quarkus#2465

Merged
MikeEdgar merged 2 commits intostreamshub:mainfrom
MikeEdgar:plain-react
Apr 24, 2026
Merged

Remove Next.js and migrate UI to plain React hosted from Quarkus#2465
MikeEdgar merged 2 commits intostreamshub:mainfrom
MikeEdgar:plain-react

Conversation

@MikeEdgar
Copy link
Copy Markdown
Member

@MikeEdgar MikeEdgar commented Apr 9, 2026

First phase for #2479
Closes #2483

  • Re-implement the UI as a client-side React application. The original Next.js application remains (for now) in the ui directory, but will no longer be built or referenced otherwise.
  • Minor adjustments to existing JS Playwright tests, still running

Still TODO (future phases of #2479)

  • OIDC security
  • Per-cluster security
  • Storybook stories for pages and custom components, as needed
  • Migrate Playwright ITs to Java

@MikeEdgar MikeEdgar force-pushed the plain-react branch 4 times, most recently from 2b1b304 to 7ba8f5b Compare April 14, 2026 20:19
@MikeEdgar MikeEdgar added this to the 0.13.0 milestone Apr 15, 2026
@MikeEdgar MikeEdgar force-pushed the plain-react branch 12 times, most recently from d0379eb to e4c2ab6 Compare April 20, 2026 15:45
Signed-off-by: Michael Edgar <medgar@redhat.com>
Assisted-by: IBM Bob
@MikeEdgar MikeEdgar marked this pull request as ready for review April 20, 2026 18:54
@MikeEdgar MikeEdgar added do not merge Do not merge just yet. Work is still in progress ready for review Pull request is ready for a static review labels Apr 20, 2026
@alexcreasy
Copy link
Copy Markdown
Contributor

alexcreasy commented Apr 23, 2026

These are the differences I've found in the console after the changes have been applied.

Landing Page

  • Missing Welcome banner with graphic
  • Missing Recommended learning resources

Anonymous Login Page

  • Missing entirely (I think in our discussion we both agreed this is actually desirable)

Toolbar header

  • Cluster context selector has a different style, but also it uses the term "Namespace" instead of "Project" and its no longer in bold.

Cluster Overview Page

Page Header

  • Breadcrumbs missing server name link - before change: "Home > kafka1 > Overview" / after change: "Home > Overview"
  • Missing Last updated time stamp and refresh button
  • Cluster connection details button has a different style: before: filled blue no border / after: transparent with border

Kafka cluster details card

  • Text under metrics difference: before "groups" after "consumer groups"
  • Slight differences in padding and spacing - nothing looks out of place though

Recent topics card

  • Empty state is different: before: has text "When you start looking at specific topics ……." after "No recent topics, cubes icon, Topics you view will appear here for quick access"
  • no docs link to "Using the Topic Operator to manage Kafka topics.
  • When the list is not empty before the recent topics are presented in a table with a title "Name" and lines between rows. After there is no rows and title

Cluster metrics card

  • Difference in text on filter dropdown, before: "All Nodes" / after: "All brokers"
  • Used disk space chart appears to have a different scale. Also it appears to be missing certain lines - I can't be sure but before the changes there appear to be all the dashed lines plotted for storage thresholds whereas after it appears to be missing them.
  • After the changes there are no filters controls for CPU or Memory Usage.

Topics card

  • Changes to text: Before red exclamation point is "Unavailable" after is "Offline".
  • No dashed underlines on the links.
  • Change in link text: before "View all" after "View all Topics"
  • Changes to text: before: "14 topics | 114 partitions" after "114 Total topics | 114 Total partitions"
  • Tooltips are vastly different, far more information is given before the changes than after.

Topic metrics

  • Missing subtitle and tooltip: before "Topics bytes incoming and outgoing"
  • After changes All topics dropdown doesn't sit nicely in line when at a medium width breakpoint - pressing it causes the layout to jump around and the dropdown to be out of place. Note this behaviour doesn't happen when you have the page width beyond the xl breakpoint.
  • Tooltip text next to Hide internal topics is different, after the change it doesn't have the information about internal topics being prefixed with an _

Topics page

  • Missing last updated timestamp and refresh button
  • Missing button next to filter by name text box
  • Different colour badges before: blue badge is used for in sync topics after: green.
  • Pagination works differently, when switching pages, before the table neatly changes view using skeletons in the rows, after it has a pretty ugly loading spinner replace the whole table which leads to a fairly janky landing when the table loads. Not this only happens on first data load - I guess it's using caching the switch is seamless when you've loaded all the data.
  • Missing tooltip next to the Status column title after changes.

Kafka Nodes page

  • One the primary navbar this page is called Kafka nodes before and is called Nodes after
  • Overview tab gives me a 403 Forbidden after, this could just be my setup?
  • Rebalance tab: Missing name dropdown filter and also new status and mode drop-down added that didn't exist before

Topics page

  • Missing last updated timestamp and refresh button
  • Missing button next to filter by name text box
  • Different colour badges before: blue badge is used for in sync topics after: green.
  • Pagination works differently, when switching pages, before the table neatly changes view using skeletons in the rows, after it has a pretty ugly loading spinner replace the whole table which leads to a fairly janky landing when the table loads. Not this only happens on first data load - I guess it's using caching the switch is seamless when you've loaded all the data.
  • Missing tooltip next to the Status column title after changes.

Kafka Nodes page

  • One the primary navbar this page is called Kafka nodes before and is called Nodes after
  • Overview tab gives me a 403 Forbidden after, this could just be my setup?
  • Rebalance tab: Missing name dropdown filter and also new status and mode drop-down added that didn't exist before

Kafka Connect Page

  • Missing last updated timestamp and refresh button

Connectors Tab

  • FIlter by name box replaced by Search connectors box
  • When clicking through to a connector detail under the tasks tab instead of it simply saying "No Task" it now says "common.noEntityAvailable" with the cubes icon.

Connect clusters tab

  • Tab name has been renamed ti Clusters
  • Filter by name input box has been replaces by Search connect clusters, the button has been removed and a spyglass icon added.
  • The table column "Connect Version" is not called "Version" and has a control for ordering that didn't exist previously.

Kafka Users page

  • I get an "Api Error: 403 Forbidden" now… again probably a configuration issue my end, but wanted to note it in case it's a bug.

Groups page

  • Missing last updated timestamp and refresh button
  • Missing info banner with "Group types identify how kafka client applications coordinate work…… learn more link"
  • The filter by (Name | Type | State) selector is removed and replaced by Filter by name box it's added a separate control for Type and State filtering.
  • Reset offsets kebab option is now a modal rather than a separate page - it misses the dropdown options of the dry run button and adds a CLI command section. It also has a clear button in addition to cancel which I'm not sure what it's supposed to do - it seemingly does nothing.

@MikeEdgar
Copy link
Copy Markdown
Member Author

@alexcreasy I've opened #2505 to track that list and I've fixed several of them locally, but I hesitate to push more to this PR. Before we release 0.13.0 we will resolve each (either accepting as fine or returning to the old way).

Copy link
Copy Markdown
Contributor

@alexcreasy alexcreasy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, I think we're in a good enough state to merge this. We can work on the list of issues I identified afterwards and circle back round for a final pass of the codebase at that point.

@sonarqubecloud
Copy link
Copy Markdown

@MikeEdgar MikeEdgar merged commit 64967cc into streamshub:main Apr 24, 2026
6 checks passed
@MikeEdgar MikeEdgar deleted the plain-react branch April 24, 2026 17:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

do not merge Do not merge just yet. Work is still in progress ready for review Pull request is ready for a static review

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Migrate all functionality from the current ui module to simple React application

3 participants